<template>
    <div class="tab-content">
        <!-- 数据类型选择器 -->
        <div class="data-type-selector">
            <el-tabs v-model="systemForm.activeDataType" class="chart-data-tabs">
                <el-tab-pane label="年度数据" name="yearly">
                    <div class="chart-data-section">
                        <div class="section-header">
                            <h4>年度发电数据 (12个月)</h4>
                            <div class="batch-operations">
                                <el-space>
                                    <el-button size="small" @click="fillRandomChartData('yearly')">随机填充</el-button>
                                    <el-button size="small" @click="clearChartData('yearly')">清空数据</el-button>
                                </el-space>
                            </div>
                        </div>
                        <div class="chart-data-table">
                            <div class="table-header">
                                <span>月份</span>
                                <span>发电量 (kWh)</span>
                                <span>操作</span>
                            </div>
                            <div class="table-body">
                                <div v-for="(item, index) in systemForm.yearlyData" :key="index" class="table-row">
                                    <div class="table-cell month-cell">
                                        <el-tag type="primary">{{ item.month }}月</el-tag>
                                    </div>
                                    <div class="table-cell value-cell">
                                        <el-input-number v-model="item.value" :min="0" :max="100000" size="small" controls-position="right" />
                                    </div>
                                    <div class="table-cell action-cell">
                                        <el-button size="small" type="text" @click="resetChartValue(item)" class="reset-btn">重置</el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="月度数据" name="monthly">
                    <div class="chart-data-section">
                        <div class="section-header">
                            <h4>月度发电数据 (30天)</h4>
                            <div class="batch-operations">
                                <el-space>
                                    <el-button size="small" @click="fillRandomChartData('monthly')">随机填充</el-button>
                                    <el-button size="small" @click="clearChartData('monthly')">清空数据</el-button>
                                </el-space>
                            </div>
                        </div>
                        <div class="chart-data-table">
                            <div class="table-header">
                                <span>日期</span>
                                <span>发电量 (kWh)</span>
                                <span>操作</span>
                            </div>
                            <div class="table-body">
                                <div v-for="(item, index) in systemForm.monthlyData" :key="index" class="table-row">
                                    <div class="table-cell day-cell">
                                        <el-tag type="success">{{ item.day }}日</el-tag>
                                    </div>
                                    <div class="table-cell value-cell">
                                        <el-input-number v-model="item.value" :min="0" :max="10000" size="small" controls-position="right" />
                                    </div>
                                    <div class="table-cell action-cell">
                                        <el-button size="small" type="text" @click="resetChartValue(item)" class="reset-btn">重置</el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="日度数据" name="daily">
                    <div class="chart-data-section">
                        <div class="section-header">
                            <h4>日度发电数据 (24小时)</h4>
                            <div class="batch-operations">
                                <el-space>
                                    <el-button size="small" @click="fillRandomChartData('daily')">随机填充</el-button>
                                    <el-button size="small" @click="clearChartData('daily')">清空数据</el-button>
                                </el-space>
                            </div>
                        </div>
                        <div class="chart-data-table">
                            <div class="table-header">
                                <span>时间</span>
                                <span>发电量 (kWh)</span>
                                <span>操作</span>
                            </div>
                            <div class="table-body">
                                <div v-for="(item, index) in systemForm.dailyData" :key="index" class="table-row">
                                    <div class="table-cell time-cell">
                                        <el-tag type="warning">{{ String(item.hour).padStart(2, '0') }}:00</el-tag>
                                    </div>
                                    <div class="table-cell value-cell">
                                        <el-input-number v-model="item.value" :min="0" :max="1000" size="small" controls-position="right" />
                                    </div>
                                    <div class="table-cell action-cell">
                                        <el-button size="small" type="text" @click="resetChartValue(item)" class="reset-btn">重置</el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>

        <div class="save-button-container">
            <el-button type="primary" @click="saveSystemData">保存发电柱图数据</el-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getDataClassifyDetail, updateDataClassify } from '@/api/port'


// ========================================================================================
// 模块2: 发电柱图配置 - 年度、月度、日度数据
// ========================================================================================

// 发电柱图数据表单
const systemForm = ref({
    activeDataType: 'yearly', // 当前选中的数据类型
    // 年度数据 (12个月)
    yearlyData: Array.from({ length: 12 }, (_, i) => ({
        month: i + 1,
        label: `${i + 1}月`,
        value: 0
    })),
    // 月度数据 (30天)
    monthlyData: Array.from({ length: 30 }, (_, i) => ({
        day: i + 1,
        label: `${i + 1}日`,
        value: 0
    })),
    // 日度数据 (24小时)
    dailyData: Array.from({ length: 24 }, (_, i) => ({
        hour: i,
        label: `${i.toString().padStart(2, '0')}:00`,
        value: 0
    }))
})

// 保存发电柱图数据
const saveSystemData = async () => {
    await updateDataClassify({
        id: 2,
        key: 'module2',
        value: systemForm.value
    })
    console.log('保存发电柱图数据:', toRaw(systemForm))
    ElMessage.success('发电柱图数据保存成功')
}

// 重置图表单个数值
const resetChartValue = (item: any) => {
    item.value = 0
    ElMessage.success('数值已重置为0')
}

// 随机填充图表数据
const fillRandomChartData = (dataType: string) => {
    switch (dataType) {
        case 'yearly':
            systemForm.value.yearlyData.forEach(item => {

                item.value = Math.floor(Math.random() * 50000) + 10000
            })
            break
        case 'monthly':
            systemForm.value.monthlyData.forEach(item => {

                item.value = Math.floor(Math.random() * 5000) + 1000
            })
            break
        case 'daily':
            systemForm.value.dailyData.forEach(item => {
                item.value = Math.floor(Math.random() * 500) + 100
            })
            break
    }
    ElMessage.success('随机数据填充完成！')
}

// 清空图表数据
const clearChartData = (dataType: string) => {
    switch (dataType) {
        case 'yearly':
            systemForm.value.yearlyData.forEach(item => {

                item.value = 0
            })
            break
        case 'monthly':
            systemForm.value.monthlyData.forEach(item => {

                item.value = 0
            })
            break
        case 'daily':
            systemForm.value.dailyData.forEach(item => {

                item.value = 0
            })
            break
    }
    ElMessage.success('数据已清空！')
}

const init = async (moduleData: any) => {
    systemForm.value = moduleData
}


defineExpose({
    init
})


</script>
<style lang="less" scoped>

</style>